package com.app.mycomposedemo.ui.screens

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material.icons.filled.Search
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.app.mycomposedemo.ui.components.ArticleColumnItem
import com.app.mycomposedemo.ui.components.TopAppBarComp
import com.app.mycomposedemo.ui.components.VerticalPagerComp
import com.app.mycomposedemo.ui.theme.Blue700
import com.app.mycomposedemo.ui.theme.Gray200
import com.app.mycomposedemo.ui.theme.Gray66
import com.app.mycomposedemo.viewmodel.ArticleViewModel
import com.app.mycomposedemo.viewmodel.MainViewModel

@Composable
fun StudyScreen(vm: MainViewModel, articleViewModel: ArticleViewModel = ArticleViewModel()) {
    Column {
        // 标题栏
        TopAppBarComp(modifier = Modifier.padding(16.dp, 8.dp)) {
            Surface(
                modifier = Modifier
                    .clip(RoundedCornerShape(50))
                    .fillMaxHeight()
                    .weight(1f),
                color = Color(0x33FFFFFF)
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        modifier = Modifier.padding(start = 16.dp),
                        imageVector = Icons.Default.Search,
                        contentDescription = null,
                        tint = Color.White
                    )
                    Text(
                        modifier = Modifier.padding(start = 4.dp),
                        text = "搜索需要的内容",
                        color = Color.White
                    )
                }
            }
            Text(
                modifier = Modifier.padding(start = 16.dp),
                text = "学习\n进度",
                fontSize = 12.sp,
                color = Color.White
            )
            Text(modifier = Modifier.padding(start = 4.dp), text = "26%", color = Color.White)
            Icon(
                modifier = Modifier
                    .padding(start = 8.dp)
                    .size(24.dp),
                imageVector = Icons.Default.Notifications,
                contentDescription = null,
                tint = Color.White
            )
        }

        // 内容栏
        TabRow(
            selectedTabIndex = vm.categoryIndex,
            backgroundColor = Gray200,
            contentColor = Blue700,
        ) {
            vm.categories.forEachIndexed { index, tabCategory ->
                Tab(
                    selected = vm.categoryIndex == index,
                    onClick = { vm.updateCategoryIndex(index) },
                    selectedContentColor = Blue700,
                    unselectedContentColor = Gray66
                ) {
                    Text(
                        text = tabCategory.title,
                        fontSize = 14.sp,
                        modifier = Modifier.padding(12.dp)
                    )
                }
            }
        }

        // 类型列表
        TabRow(
            selectedTabIndex = vm.typeIndex,
            backgroundColor = Color.Transparent,
            contentColor = Blue700,
            indicator = {},
            divider = {}
        ) {
            vm.types.forEachIndexed { index, tabType ->
                LeadingIconTab(
                    selected = vm.typeIndex == index,
                    onClick = { vm.updateTypeIndex(index) },
                    text = { Text(text = tabType.label) },
                    icon = { Icon(imageVector = tabType.icon, contentDescription = null) },
                    selectedContentColor = Blue700,
                    unselectedContentColor = Gray66
                )
            }
        }

        LazyColumn() {
            // 垂直轮播
            item { VerticalPagerComp(vm) }

            // 文章列表
            items(articleViewModel.articleList) { article ->
                ArticleColumnItem(article)
            }

        }
    }
}

@Preview(showSystemUi = true)
@Composable
fun StudyScreenPreview() {
    StudyScreen(MainViewModel(), ArticleViewModel())
}

